<script>
export default {
  data() {
    return {
      isCollapse: true,
    }
  },
  methods: {
    handleCommand(command) {
      if (command == 'logout') {
        sessionStorage.removeItem('username');
        this.$router.push('/login')
      }
    }
  },
  logout() {
    this.$router.push('/login')
  },
  // handleOpen(key, keyPath) {
  //   // console.log(key, keyPath);
  //   this.changeWidth = '200px'
  // },
  // handleClose(key, keyPath) {
  //   // console.log(key, keyPath);
  //   this.changeWidth = '50px'
  // }

}
</script>

<template>
  <div>
    <el-container>
      <el-aside class="left" width="200px">
        <!-- router用户通过点击菜单来跳转页面   unique-opened 确保了用户在同一时间只能看到一个子菜单的展开内容  -->
<!--        @open="handleOpen"-->
<!--        @close="handleClose"-->
        <el-menu
            default-active="/home"
            unique-opened
            router
            style="border: none; height: 100%; width: 200px"

            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
          <el-menu-item index="home">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item index="community">
            <i class="el-icon-menu"></i>
            <span slot="title">小区管理</span>
          </el-menu-item>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>帮买取快递废品回收</span>
            </template>
            <el-menu-item index="storeManage">
              <i class="el-icon-s-shop"></i>
              <span>门店管理</span>
            </el-menu-item>
            <el-menu-item index="stationManage">
              <i class="el-icon-s-home"></i>
              <span>驿站管理</span>
            </el-menu-item>
            <el-menu-item index="goodManage">
              <i class="el-icon-lollipop"></i>
              <span>商品管理</span>
            </el-menu-item>
            <el-menu-item index="orderManage">
              <i class="el-icon-edit-outline"></i>
              <span>订单管理</span>
            </el-menu-item>
            <el-menu-item index="salesService">
              <i class="el-icon-document"></i>
              <span>废品回收订单</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>胖虎甄选</span>
            </template>
            <el-menu-item index="4-1">
              <i class="el-icon-s-custom"></i>
              <span>商品管理</span>
            </el-menu-item>
            <el-menu-item index="4-2">
              <i class="el-icon-edit-outline"></i>
              <span>订单管理</span>
            </el-menu-item>
            <el-menu-item index="4-3">
              <i class="el-icon-document"></i>
              <span>售后订单</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>胖虎</span>
            </template>
            <el-menu-item index="5-1">
              <i class="el-icon-s-custom"></i>
              <span>家政服务</span>
            </el-menu-item>
            <el-menu-item index="5-2">
              <i class="el-icon-edit-outline"></i>
              <span>订单管理</span>
            </el-menu-item>
            <el-menu-item index="5-3">
              <i class="el-icon-document"></i>
              <span>售后订单</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item index="6">
            <i class="el-icon-menu"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="7">
            <i class="el-icon-menu"></i>
            <span slot="title">骑手管理</span>
          </el-menu-item>
          <el-menu-item index="8">
            <i class="el-icon-menu"></i>
            <span slot="title">家政管理</span>
          </el-menu-item>
          <el-menu-item index="9">
            <i class="el-icon-menu"></i>
            <span slot="title">新用户红包</span>
          </el-menu-item>
          <el-menu-item index="10">
            <i class="el-icon-menu"></i>
            <span slot="title">类目管理</span>
          </el-menu-item>

        </el-menu>

      </el-aside>

      <!--  右边    -->
      <el-container class="right">
        <!--  头部  -->
        <el-header>
          <!--          <el-radio-group v-model="isCollapse" style="margin-left: -20px;margin-top: 10px">-->
          <!--            <el-radio-button :label="false" >展开</el-radio-button>-->
          <!--            <el-radio-button :label="true">收起</el-radio-button>-->
          <!--          </el-radio-group>-->
          <!--          Header-->
          <div class="head-left">
            <i style="font-size: 30px" class="el-icon-s-fold icon"></i>
          </div>
          <div class="head-right">
            <el-dropdown @command="handleCommand" trigger="click">
              <span class="el-dropdown-link" style="color: #2c3e50">胖虎<i class="el-icon-arrow-down el-icon--right"></i></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item>个人设置</el-dropdown-item>
                <el-dropdown-item divided command="login">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <!--   中间   -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.el-container {
  display: flex;
  height: 100vh;
}

.el-aside {
  height: 100%;
  //float: left;
  //width: 220px !important;
  //display: flex;
  //background-color: #42b983;
}

.el-header {
  height: 60px;
  background-color: #545c64aa;
}

.el-main {
  //background-color: antiquewhite;
  flex: 1;
}

.head-left {
  float: left;
  line-height: 60px;
}

.header-left .icon {
  font-size: 26px;
  padding-top: 17px;
  cursor: pointer;
}

.el-dropdown-link {
  cursor: pointer;
}

.head-right {
  float: right;
  line-height: 60px;
}

.header-right img {
  height: 50px;
  vertical-align: middle;

}


</style>